import { Card, Image } from "antd";
import React, { useState } from "react";
import styles from "./index.module.scss";

interface RoomCardProps {
  roomNumber: number;
  decorationType: string;
  area: number;
  unitPrice: number;
  src: string;
}

const RoomCard: React.FC<RoomCardProps> = (props) => {
  const {roomNumber, decorationType, area, unitPrice, src} = props;
	const [visible, setVisible] = useState(false);
  const [scaleStep, setScaleStep] = useState(0.5);

  return (
    <div>
      <Card
        title="房间号"
        extra={<a onClick={() => setVisible(true)}>户型图</a>}
      >
        <h1 className={styles.title}>{roomNumber}</h1>
        <ul className={styles.info}>
          <li>
            <span>装修情况：</span>
            <span>{decorationType}</span>
          </li>
          <li>
            <span>房间面积：</span>
            <span>{area}㎡</span>
          </li>
          <li>
            <span>出租单价：</span>
            <span>{unitPrice}元/平/日</span>
          </li>
        </ul>
      </Card>
      <Image
        width={200}
        style={{ display: "none" }}
        preview={{
          visible,
          scaleStep,
          src,
          onVisibleChange: (value) => {
            setVisible(value);
          },
        }}
      />
    </div>
  );
};

export default RoomCard;
